<template>
  <BeTable
    class="offline-upload-list"
    rowKey="id"
    :columns="columns"
    :pagination="{ pageSize: 15, total: 100 }"
    :data-source="tableData"
    :rowSelection="rowSelection"
    :scroll="{ x: 1400 }"
    :formSetting="{ fields: searchFields, maxVisible: 4 }"
  >
    <template #toolbar>
      <BeButton class="create-btn" type="primary" @click="createTask">
        <BeIcon icon="local:add" />
        <span>新增脱敏任务</span>
      </BeButton>
    </template>
    <!-- 自定义单元格内容 -->
    <template #bodyCell="{ column, record }">
      <!-- 渲染进度条 -->
      <template v-if="column.key === 'progress'">
        <a-progress :percent="record.progress" :status="record.progress === 100 ? 'success' : 'active'" />
      </template>

      <!-- 渲染操作按钮 -->
      <template v-else-if="column.key === 'action'">
        <div class="options-btns">
          <a-dropdown trigger="click">
            <BeButton type="link">更多</BeButton>
            <template #overlay>
              <a-menu>
                <a-menu-item @click="editTask(record)">修改任务</a-menu-item>
                <a-menu-item @click="deleteTask(record)">删除任务</a-menu-item>
                <a-menu-item @click="monitorTask(record)">任务监控</a-menu-item>
                <a-menu-item @click="downloadLog(record)">下载记录</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </template>
    </template>
  </BeTable>
</template>

<script lang="ts" setup>
import { TableColumnsType } from 'ant-design-vue'

defineOptions({
  name: 'OfflineUploadService'
})

// state
const _pageInj = inject<any>('page')
// 表单字段定义（与 SearchForm 中的 prop 类型一致）
const searchFields = [
  { label: '文件名', prop: 'filename', component: 'Input' },
  { label: '工单号', prop: 'workCode', component: 'Input' },
  { label: '水印内容', prop: 'watermark', component: 'Input' },
  { label: '授权人', prop: 'authorizer', component: 'Input' },
  {
    label: '上传时间',
    prop: 'uploadTime',
    component: 'RangePicker',
    componentProps: { style: 'width: 180px' }
  },
  {
    label: '导出时间',
    prop: 'exportTime',
    component: 'RangePicker',
    componentProps: { style: 'width: 180px' }
  }
]

// 表格数据
const tableData = ref([
  {
    id: 1,
    filename: 'raskEvent.xlsx',
    workCode: 'TradeCode1',
    size: '0.01',
    rows: 6,
    authorizer: '袁浩',
    watermark: '袁浩',
    strategy: '策略1',
    status: '完成',
    progress: 100,
    uploadDate: '2025-05-25'
  },
  {
    id: 2,
    filename: 'tz–data,zip',
    workCode: 'TradeCode2',
    size: '0.02',
    rows: 102,
    authorizer: '袁浩',
    watermark: '袁浩',
    strategy: '策略1',
    status: '完成',
    progress: 80,
    uploadDate: '2025-05-22'
  },
  {
    id: 3,
    filename: 'raskEvent2.xlsx',
    workCode: 'TradeCode3',
    size: '0.3',
    rows: 88,
    authorizer: '袁浩',
    watermark: '袁浩',
    strategy: '策略1',
    status: '完成',
    progress: 100,
    uploadDate: '2025-05-21'
  },
  {
    id: 4,
    filename: 'tz–data2,zip',
    workCode: 'TradeCode4',
    size: '0.15',
    rows: 69,
    authorizer: '袁浩',
    watermark: '袁浩',
    strategy: '策略1',
    status: '完成',
    progress: 100,
    uploadDate: '2025-05-18'
  },
  {
    id: 5,
    filename: 'tz–',
    workCode: 'TradeCode5',
    size: '0.44',
    rows: 1120,
    authorizer: '袁浩',
    watermark: '袁浩',
    strategy: '策略1',
    status: '完成',
    progress: 100,
    uploadDate: '2025-05-15'
  },
  {
    id: 6,
    filename: 'tz–',
    workCode: 'TradeCode5',
    size: '0.44',
    rows: 1120,
    authorizer: '袁浩',
    watermark: '袁浩',
    strategy: '策略1',
    status: '完成',
    progress: 100,
    uploadDate: '2025-05-15'
  },
  {
    id: 7,
    filename: 'tz–',
    workCode: 'TradeCode5',
    size: '0.44',
    rows: 1120,
    authorizer: '袁浩',
    watermark: '袁浩',
    strategy: '策略1',
    status: '完成',
    progress: 100,
    uploadDate: '2025-05-15'
  }
])
// 表格定义
const columns: TableColumnsType = [
  { title: '文件名', align: 'center', dataIndex: 'filename', fixed: 'left' },
  { title: '工单编号', align: 'center', dataIndex: 'workCode' },
  { title: '供给量 (MB)', align: 'center', dataIndex: 'size' },
  { title: '供给量 (行)', align: 'center', dataIndex: 'rows' },
  { title: '授权信息', align: 'center', dataIndex: 'authorizer' },
  { title: '水印内容', align: 'center', dataIndex: 'watermark' },
  { title: '脱敏策略', align: 'center', dataIndex: 'strategy' },
  { title: '任务状态', align: 'center', dataIndex: 'status' },
  { title: '任务进度', align: 'center', key: 'progress' },
  { title: '上传时间', align: 'center', dataIndex: 'uploadDate' },
  { title: '操作', align: 'center', key: 'action', fixed: 'right' }
]
const rowSelection = ref({
  checkStrictly: false,
  onChange: (selectedRowKeys: (string | number)[], selectedRows: any) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  },
  onSelect: (record: any, selected: boolean, selectedRows: any) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected: boolean, selectedRows: any, changeRows: any) => {
    console.log(selected, selectedRows, changeRows)
  }
})

const createTask = () => {
  console.log('创建新任务')
}

const editTask = (record: any) => {
  console.log('编辑任务', record)
}

const deleteTask = (record: any) => {
  console.log('删除任务', record)
}

const monitorTask = (record: any) => {
  console.log('任务监控', record)
}

const downloadLog = (record: any) => {
  console.log('下载记录', record)
}
</script>
<style lang="scss" scoped>
.offline-upload-list {
  // padding: 0 20px;
  background-color: var(--color-white);
  .create-btn {
    display: flex;
    align-items: center;
    .svg-icon {
      margin-right: 10px;
      font-size: 18px;
      color: var(--color-white);
    }
  }
  .be-table {
    .options-btns {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
